<template>
  <el-button type="success" @click="GetAddUser()">新增用户</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="userId" label="编号" width="70" />
      <el-table-column prop="userName" label="用户名" width="90" />
      <el-table-column prop="roleName" label="角色名称" width="150" >
        <template v-slot="scope">
            {{scope.row.roleName}}
        </template>
      </el-table-column>
      <el-table-column prop="userSex" label="性别" width="80" >
        <template v-slot="scope">
            {{scope.row.userSex==1?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column prop="provinceId" label="所在省" width="140" >
        <template v-for="items in regionData" v-slot="scope">
         {{getscodes(scope.row.provinceId)}}
        </template>
      </el-table-column>
      <el-table-column prop="cityId" label="所在市" width="90" >
        <template   v-slot="scope">
         {{getscodes2(scope.row.cityId)}}
        </template>
      </el-table-column>
      <el-table-column prop="countyId" label="所在县" width="200" >
        <template   v-slot="scope">
         {{getscodes3(scope.row.countyId)}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="详细地址" width="120" >
        <template v-slot="scope">
          <el-tooltip :content="scope.row.address" placement="top">
          <span>{{ truncateAddress(scope.row.address) }}</span>
        </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createPeople" label="创建人" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="200" >
        <template v-slot="scope">
            {{scope.row.createTime.substring(0,10)+" "+ scope.row.createTime.substring(11,19)}}
        </template>
      </el-table-column>
      <el-table-column prop="updatePeople" label="更新人" width="120" />
      <el-table-column prop="updateTime" label="更新时间" width="190">
        <template v-slot="scope" >
          <div v-if="scope.row.updateTime!=null">
            {{moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss")}}
          </div>
          
        </template>
      </el-table-column >

      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="DeleteUser(scope.row.userId)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="UpdateUser(scope.row.userId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog v-model="dialogFormVisible" title="更新" width="500" draggable>
    <el-form :model="ruleForm">
        <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>

      <el-form-item label="性别" prop="userSex">
        <el-radio-group v-model="ruleForm.userSex">
        <el-radio :value="1">男</el-radio>
        <el-radio :value="0">女</el-radio>
      </el-radio-group>
      </el-form-item>

      <el-form-item label="所在地址">
        <div id="app">
    <el-cascader
      size="large"
      :options="optios"
     v-model="provinces"
      @change="handleChange">
    </el-cascader>
  </div>
      </el-form-item>

      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer >
      <div class="dialog-footer" >
        <el-button @click="getUpdate();">确认</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          重置
        </el-button>
      </div>
    </template>
  </el-dialog>

  </template>
    <script lang="ts" setup>
    import { regionData } from 'element-china-area-data'
   import { onMounted, reactive, ref } from 'vue'
  import { ElMessage,ElMessageBox, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios'
  import {useRouter,useRoute} from 'vue-router'
import {useCounterStore} from '@/stores/counter'
import moment from 'moment'
let router=useRouter();
let stroe=useCounterStore();
const optios =regionData;
const provinces=ref<any>([

]);
// 截取地址函数
const truncateAddress = (address: string) => {
  if (address.length > 5) {
    return address.substring(0, 5) + '*'.repeat(address.length - 5);
  }
  return address;
};

const handleChange=(valwescv:any)=>{
  provinces.value=valwescv;
  ruleForm.provinceId=valwescv[0];
  ruleForm.cityId=valwescv[1];
  ruleForm.countyId=valwescv[2];

    console.log(ruleForm.provinceId)
    console.log(ruleForm.cityId)
    console.log(ruleForm.countyId)
}

onMounted(()=>{
    getlist();
})
const getlist=()=>{
axios({
    url:'http://localhost:5284/api/Users/QuertUser',
    method:'get',
})
.then(res=>{
    if(res.data.code==101){
        tableData.value=res.data.list;
    }
})
}
const DeleteUser = (userId:any) => {
  ElMessageBox.confirm(
    '您确定要操作吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios({
        url:'http://localhost:5272/api/User/DeleteUser',
        method:'put',
        data:{
            userId:userId
        }
    })
    .then(res=>{
        if(res.data.code=101){
            ElMessage({
        type: 'success',
        message: '操作成功',
      })
      getlist();
        }
    })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}




const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const ruleForm = reactive({
    userId:'',
    userName: '',
    pwd:'12345678',
    userSex: '',
    provinceId:'',
    cityId: '',
    countyId: '',
    address: '',
    createPeople: '',

  })
const eatac:any=reactive([])

const UpdateUser=(userId:any)=>{
    axios({
    url:'http://localhost:5284/api/Users/GetUser',
    method:'get',
    params:{
        userId:userId
    }
})
.then(res=>{
    if(res.data.code==101){
      console.log(res)
      
        ruleForm.userId=res.data.data[0].userId
        ruleForm.userName=res.data.data[0].userName;
        ruleForm.userSex=res.data.data[0].userSex;  
        ruleForm.address=res.data.data[0].address;
        ruleForm.provinceId=res.data.data[0].provinceId;
        ruleForm.countyId=res.data.data[0].countyId;
        ruleForm.cityId=res.data.data[0].cityId;
       
        // eatac[0]=res.data.data[0].provinceId
        // eatac[1]=res.data.data[0].cityId
        // eatac[2]=res.data.data[0].countyId
   
        ///provinces[1].value=res.data.data[0].cityId;;
        // provinces.value[2]=res.data.data[0].countyId;;

        // provinces.value=res.data.data[0].provinceId,res.data.data[0].cityId,res.data.data[0].countyId;
        // provinces.value=res.data.data[0].provinceId,res.data.data[0].cityId,res.data.data[0].countyId;
        // provinces.cityId=;
        // provinces.countyId=;
        // console.log(eatac) 
        
        getSheng(ruleForm.provinceId, ruleForm.cityId,ruleForm.countyId)
      
        dialogFormVisible.value=true

        console.log(ruleForm.userName)
    }
})

}


const getSheng=(ids1:any,ids2:any,ids3:any)=>{
provinces.value=[ids1.toString(),ids2.toString(),ids3.toString()];
console.log(provinces);
}


// onMounted(()=>{
//     Getprovince();
   
//   })
// let province=ref([]);
// let city=ref([]);
// let county=ref([]);

// const Getprovince=()=>{
//   axios({
//     url:'http://localhost:5174/api/Users/QueryProvnice',
//     method:'get',
//   })
//   .then(res=>{
//     if(res.data.code==101){
//       province.value=res.data.data;
//     }
//   })
// }
// const GetCity=()=>{
//   axios({
//     url:'http://localhost:5174/api/Users/QueryCity',
//     method:'get',
//     params:{
//       ProvinceId:ruleForm.provinceId
//     }
    
//   })
//   .then(res=>{
    
//     if(res.data.code==101){
//       city.value=res.data.data;
//     }
//   })
// }

// const GetCounty=()=>{
//   axios({
//     url:'http://localhost:5174/api/Users/QueryCounty',
//     method:'get',
//     params:{
//       CityId:ruleForm.cityId
//     }
//   })
//   .then(res=>{
   
//     if(res.data.code==101){
//       county.value=res.data.data;
//     }
//   })
// }


const getUpdate=()=>{
axios({
    url:'http://localhost:5272/api/User/UpdateUser',
    method:"put",
    data:{
        userId:ruleForm.userId,
        userName:ruleForm.userName,
        userSex:ruleForm.userSex,
        provinceId:ruleForm.provinceId,
        cityId:ruleForm.cityId,
        countyId:ruleForm.countyId,
        address:ruleForm.address,
        updatePeople:stroe.CurrLoginUser.UserName,
    }
})
.then(res=>{
    if(res.data.code==101){
        ElMessage.success("更新成功");
        getlist();
        dialogFormVisible.value=false;
    }
    else{
        ElMessage.error(res.data.message)
    }
})
}
const datas:any=reactive({
  lable1:{},
  lable2:{},
  lable3:{}
})

const getscodes=(value:any)=>{
  datas.lable1=regionData.find(item=>item.value==value);
  console.log(datas.lable1)
  return datas.lable1?datas.lable1.label:"未找到"
  
}



const getscodes2=(value:any)=>{
 
  datas.lable2= datas.lable1.children.find((item:any)=>item.value==value);
  return datas.lable2?datas.lable2.label:"未找到"
}

const getscodes3=(value:any)=>{
 
 datas.lable3= datas.lable2.children.find((item:any)=>item.value==value);
 return datas.lable3?datas.lable3.label:"未找到"
}


 const tableData = ref([]);
 //跳转到添加页面
const GetAddUser=()=>{
  router.push('/AddUser')
}

</script>
  